<template>
	<view class="container" v-if="data.isShow">
		<view class="position confirm-map2">
			<view class="position-text">
				<view class="tit">{{data.datainfo.store_name}}</view>
				<view class="txt">{{data.datainfo.store_address}}</view>
			</view>
			<view class="img" @click="lookare">
				<image src="https://pili-vod.guanxikeji.com/hemashangcheng/img/1731056342343.png"></image>
			</view>
		</view>
		<view class="addinfo" v-if="data.datainfo.area">
			<view class="title">收货人信息</view>
			<view class="top">
				<view class="name">收货人姓名：{{data.datainfo.name}}</view>
			</view>
			<view class="top" style="margin-top: 5px;">
				<view class="name" >收货人电话：{{data.datainfo.mobile}}</view>
			</view>
			<view class="top" style="margin-top: 5px;">
				<view class="name">收货人地址：{{data.datainfo.province+data.datainfo.city+data.datainfo.area+data.datainfo.detailed}}
				</view>
			</view>
		</view>
		<view class="qrcode"  v-if="data.datainfo.status || data.datainfo.takeinfo || data.datainfo.qrdata">
			<view class="title"  style="margin-bottom: 10px;" v-if="data.datainfo.status">
				<view class="name">订单状态：<text>{{  ["更新取餐码", "", "", "出餐完成", "配送中", "已完成", "出餐失败退款", "", "", "部分退款"][
          data.datainfo.status
          ]}}</text> </view>
			</view>
			<view class="title" v-if="data.datainfo.takeinfo">
				<view class="name">取餐码：<text>{{data.datainfo.takeinfo || '暂未出餐'}}</text> </view>
			</view>
			<view class="top" style="margin-top: 5px;" v-if="data.datainfo.qrdata">
				<image style="display: flex;justify-content: center;width: 100%;" :src="data.code" mode="aspectFit"></image>
				<l-painter isCanvasToTempFilePath @success="paintersuccess" hidden
					:css="'width: 175px;height:175px;display: flex;justify-content: center; '">
					<l-painter-view css="width: 125px; height: 125px;">
						<l-painter-qrcode css="width: 125px; height: 125px; margin:10px auto;"
							:text="data.datainfo.qrdata"></l-painter-qrcode>
					</l-painter-view>
				</l-painter>
			</view>
		</view>
		<view class="order-goods-info">
			<view class="order-goods-info-title">商品信息</view>
			<view class="order-goods-info-item" v-for="(item,index) in data.datainfo.infoarr" :key="index">
				<view class="order-goods-info-item-img">
					<image :src="item.litimgUrl"></image>
				</view>
				<view class="order-goods-info-item-text">
					<view class="order-info-box">
						<view class="order-info-name">{{item.title }}</view>
						<view class="item-box-tips-box">
							<view class="item-box-tips" >
								{{item.skuName}}
								<text></text>
							</view>
						</view>
						<view class="order-info-price-box">
							<view class="order-info-price">{{$toFiexd((item.price),2) }}
								<text>{{$sellPrice(item)}} + zkfc {{(parseFloat(item.price) - $sellPrice(item)).toFixed(2)}}</text>
							</view>
							<view class="Al_Medium order-info-num" >x{{item.quantity}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="order-goods-info-total">
			<view class="txt">共{{totalnumber(data.datainfo.infoarr)}}件商品，</view>
			<view class="txt" v-if="data.datainfo.freight>0">运费{{data.datainfo.freight}}元，</view>
		<view class="Al_Bold">合计 ¥{{$toFiexd((parseFloat(data.datainfo.price) + parseFloat(data.datainfo.freight) ),2)}}</view>
			</view>
		</view>
		<view class="order-info">
			<view class="order-info-title">订单信息</view>
			<view class="order-info-item">
				<view class="left">下单时间:</view>
				<view class="right">{{parseDateTime(data.datainfo.CreatedAt)}}</view>
			</view>
			<view class="order-info-item">
				<view class="left">订单编号:</view>
				<view class="right">{{data.datainfo.order_id}}</view>
			</view>
			<view class="order-info-item">
				<view class="left">取餐方式:</view>
				<view class="right">{{['堂食','打包外带', '外送'][data.datainfo.take]}}</view>
			</view>
			<view class="order-info-item">
				<view class="left">支付方式:</view>
				<view class="right">{{['茶果','微信','支付宝','银行卡'][data.datainfo.pay_type]}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from "vue";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	const {
		proxy
	} = getCurrentInstance();
	let data = reactive({
		order: '', //订单号
		datainfo: {},
		isShow: false,
		code: "",

	})

	function back() {
		uni.navigateBack()
	}
	onLoad((option) => {
		data.order = option.id
		getData()
	})
	onShow(() => {

	})
	//二维码
	function paintersuccess(e) {
		data.code = e
	}
	//查看地区
	function lookare() {
		uni.openLocation({
			latitude: data.datainfo.store_lat,
			longitude: data.datainfo.store_lng,
			success: function() {
				console.log('success');
			}
		});
	}
	//件数
	function totalnumber(arr) {

		let number = 0
		arr.forEach((it) => {
			number += it.quantity
		})

		return number
	}

	function getData() {
		proxy.$request({
			url: `api/openapi/luckincoffee/queryOrder/`,
			method: 'post',
			data: {
				out_order_no: data.order
			},
			success: (res) => {

				if (res.errno == 0) {
					//处理详情
					let goods = JSON.parse(res.data.goods)
					let goods_detail = JSON.parse(res.data.goods_detail)
							console.log(goods,"goods")
					let arr = []

					goods.forEach((itemss) => {
						let obj = {}
						goods_detail.forEach((items) => {

								if(itemss.itemNo == items.itemNo){
									let obj = {
										oldprice: items.firstSku.sellPrice,
										price: items.firstSku.sellPrice,
										oldamount: items.firstSku.amount,
										amount: items.firstSku.amount,
										goods: [],
										checkbox: [], //查看选了 那些
										skuNo: items.firstSku.skuNo,
										skuName: items.firstSku.skuName,
										litimgUrl: items.litimgUrl,
										title: items.title,
										quantity: itemss.num, //默认一杯
										skuCombinList: [],
										itemNo:items.itemNo,
									}
									let specItems = items.specItems //需要赛选的
									let skusSpecs = items.firstSku.skusSpecs //需要赛选的
									let skuCombinList = items.skuCombinList //需要赛选的
									specItems.forEach((item, i) => {
										let listobj = {}
										listobj.title = item.specItemName
										listobj.list = []
										listobj.id = skusSpecs[i].specItemValue
										obj.checkbox.push(skusSpecs[i].specItemValue)
										item.specValueList.forEach((it) => {
											let valueobj = {}
											valueobj.text = it.name
											valueobj.value = it.value
											listobj.list.push(valueobj)
										})
										obj.goods.push(listobj)
									})
									skuCombinList.forEach((item) => {
										item.checkbox = []
										item.skusSpecs.forEach((it) => {
											item.checkbox.push(it.specItemValue)
										})
									})
									obj.skuCombinList = skuCombinList
										arr.push(obj)

								}
						})
					})
					console.log(arr,"Arr")
					data.datainfo = res.data
					res.data.infoarr = []
					data.datainfo.infoarr = arr
					data.isShow = true




				}
			}
		})
	}
	//图片转换
	function resimg(row) {
		if (row) {
			let img = JSON.parse(row)
			return img[0].image
		}

	}

	function rename(row) {
		if (row) {
			let img = JSON.parse(row)
			return img[0].name
		}

	}
	//时间格式
	function parseDateTime(dateTimeStr) {
		// 创建一个新的 Date 对象
		const date = new Date(dateTimeStr);

		// 获取年份、月份、日期、小时、分钟和秒
		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要加1
		const day = String(date.getDate()).padStart(2, '0');
		const hours = String(date.getHours()).padStart(2, '0');
		const minutes = String(date.getMinutes()).padStart(2, '0');
		const seconds = String(date.getSeconds()).padStart(2, '0');

		// 返回格式化后的字符串
		return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
	}
	function paymoney(row){
		  let str = (((parseFloat(row.price) - parseFloat(row.amount)) / 2) + parseFloat(row.amount)).toFixed(2)
		      return str
	}
</script>

<style lang="scss" scoped>
	.container {
		margin-top: 11px;
		padding: 0 11px;

		.position {

			height: 99px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 0px 0 22px;
			padding-left: 11px !important;
			background: #fff;
			border-radius: 11px;

			.position-text {
				flex: 1;
				width: 80%;
				padding-top: 11px;

				.tit {
					display: flex;
					align-items: center;
					font-size: 17px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: rgba(0, 0, 0, .85);
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					width: 259px;
				}

				.txt {
					font-size: 13px;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: rgba(0, 0, 0, .45);
					margin-top: 11px;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					text-overflow: ellipsis;
					overflow: hidden;

				}
			}

			.img {
				position: relative;
				width: 20%;
				height: 99px;

				image {
					position: absolute;
					bottom: 0;
					width: 77px;
					height: 77px;
					background-size: cover;
				}
			}
		}

		.addinfo {
			background: #fff;
			border-radius: 11px;
			margin-top: 11px;
			padding: 11px;

			.title {
				width: 100%;
				height: 24px;
				font-size: 17px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: rgba(0, 0, 0, .85);
				line-height: 24px;
				margin-bottom: 22px;
			}

			.top {
				display: flex;
				font-size: 15px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: rgba(0, 0, 0, .85);

			}
		}

		.qrcode {
			background: #fff;
			border-radius: 11px;
			margin-top: 11px;
			padding: 11px;

			.title {
				width: 100%;
				height: 24px;
				font-size: 17px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: rgba(0, 0, 0, .85);
				line-height: 24px;
				margin-bottom: 22px;

				.name {
					font-size: 15px;

					text {
						color: red;
						font-size: 16px;
					}
				}
			}

		}

		.order-goods-info {

			background: #fff;
			border-radius: 11px;
			margin-top: 11px;
			padding: 11px;

			.order-goods-info-title {
				width: 100%;
				height: 24px;
				font-size: 17px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: rgba(0, 0, 0, .85);
				line-height: 24px;
				margin-bottom: 22px;
			}

			.order-goods-info-item {
				width: 100%;
				padding: 0 0 22px;
				display: flex;
				justify-content: flex-start;
				border-bottom: 0.5px solid #f2f2f2;
				border-color: transparent;

				.order-goods-info-item-img {
					width: 66px;
					height: 66px;
					margin-right: 11px;

					image {
						width: 66px;
						height: 66px;
						border-radius: 4px;
					}
				}

				.order-goods-info-item-text {
					flex: 1;

					.order-info-box {
						.order-info-name {

							font-size: 15px;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: rgba(0, 0, 0, .85);
							line-height: 22px;
						}

						.item-box-tips-box {
							margin-top: 12px;

							.item-box-tips {
								font-size: 11px;
								color: rgba(0, 0, 0, .45);
								font-family: PingFang-SC-Medium, PingFang-SC;
								font-weight: 400;
								margin-bottom: 2px;
								display: flex;
							}
						}

						.order-info-price-box {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 7px;

							.order-info-price {
								font-size: 22px;
								font-weight: 400;
								font-family: AlibabaPuHuiTiB;
								color: rgba(0, 0, 0, .85);
								line-height: 30px;

								text {
									font-size: 13px;
									font-family: AlibabaPuHuiTiM;
									color: rgba(0, 0, 0, .25);
									line-height: 18px;
									margin-left: 5px;
									// text-decoration: line-through;
								}
							}

							.order-info-price::before {
								content: "￥";
								font-size: 13px;
								font-family: AlibabaPuHuiTiB;
								color: rgba(0, 0, 0, .85);
							}
						}

						.order-info-num {
							font-size: 13px;
							color: rgba(0, 0, 0, .25);
							margin-top: 5px;
						}
					}
				}
			}

			.order-goods-info-total {
				width: 100%;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				margin-top: 22px;

				.txt {
					height: 18px;
					font-size: 13px;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: rgba(0, 0, 0, .85);
					line-height: 18px;
					margin-right: 5px;
					margin-top: 2px;
				}

				.Al_Bold {
					height: 24px;
					font-size: 17px;
					color: rgba(0, 0, 0, .85);
					line-height: 24px;
				}
			}
		}

		.order-info {

			background: #fff;
			border-radius: 11px;
			margin-top: 11px;
			padding: 11px;

			.order-info-title {
				font-size: 17px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: rgba(0, 0, 0, .85);
				margin-bottom: 22px;
			}

			.order-info-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 16px;

				.left {
					font-size: 15px;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: rgba(0, 0, 0, .45);
				}

				.right {
					font-size: 15px;
					font-family: AlibabaPuHuiTiM;
					color: rgba(0, 0, 0, .85);
				}
			}
		}
	}

	.Al_Medium {
		font-family: Medium !important;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
</style>
